<template>
  <div>
    <CheckboxGroup
      class="toggle-list"
      v-model="pageStatus"
      @on-change="routePageStatus"
      v-show="visible.toggleList"
    >
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.planRoaming">
          <Checkbox label="PlanRoaming">
            <i class="icon icon-planRoaming"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">规划漫游</div>
          <div class="subtitle">PlanRoaming</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.camera">
          <Checkbox label="Cameras">
            <i class="icon icon-camera"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">进度监控</div>
          <div class="subtitle">ProgressMonnitoring</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.personnel">
          <Checkbox label="Personnel">
            <i class="icon icon-personnel"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">人员监控</div>
          <div class="subtitle">PersinnelMonitoring</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.towerCrane">
          <Checkbox label="TowerCrane">
            <i class="icon icon-tower-crane"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">大型设备</div>
          <div class="subtitle">LargeEquipment</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.alternatives">
          <Checkbox label="Alternatives">
            <i class="icon icon-alternatives"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">方案比选</div>
          <div class="subtitle">Alternatives</div>
        </div>
      </Tooltip>
    </CheckboxGroup>
    <vw-right v-show="visible.dataPanel">
      <vw-row>
        <vw-box box-name="项目概况" box-type="train">
          <p @click="smartJz(tz_urls.max_gd_url)" class="max_gd">更多</p>
          <vw-box-item width="33.33%" box-type="tower">
            <vc-icon-card
              icon-name="icon-project-amount"
              title="项目总数"
              :number="dataPanel.projectAmount"
            ></vc-icon-card>
            <vc-icon-card
              icon-name="icon-accomplish-percent"
              title="总体完成度"
              :number="dataPanel.accomplishPercent"
              unit="%"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="66.67%" box-type="tower">
            <ve-chart-halo-pie
              id="chart-project-classified"
              :chart-data="chartData.projectClassified"
              :height="155 * ratio"
              unit="个"
            ></ve-chart-halo-pie>
          </vw-box-item>
          <vw-box-item width="100%">
            <vw-plate title="质量安全概况" box-type="train">
              <p @click="smartJz(tz_urls.min_gd_url)" class="min_gd">更多</p>
              <p @click="smartJz(tz_urls.ck_url)" class="min_ck">查看</p>
              <vw-plate-item width="33.33%">
                <vc-icon-card
                  icon-name="icon-patrol-count"
                  title="巡检次数"
                  :number="dataPanel.patrolCount"
                ></vc-icon-card>
              </vw-plate-item>
              <vw-plate-item width="33.33%">
                <vc-icon-card
                  icon-name="icon-pass-count"
                  title="合格次数"
                  :number="dataPanel.passCount"
                ></vc-icon-card>
              </vw-plate-item>
              <vw-plate-item width="33.33%">
                <vc-icon-card
                  icon-name="icon-hidden-dangerous"
                  title="安全隐患数"
                  :number="dataPanel.hiddenDangerous"
                ></vc-icon-card>
              </vw-plate-item>
            </vw-plate>
          </vw-box-item>
          <vw-box-item width="100%">
            <vw-plate title="人员情况" box-type="train">
              <vw-plate-item width="33.33%">
                <vc-icon-card
                  icon-name="icon-worker-amount"
                  title="总人数"
                  :number="dataPanel.workerAmount"
                ></vc-icon-card>
              </vw-plate-item>
              <vw-plate-item width="33.33%">
                <vc-icon-card
                  icon-name="icon-worker-registered"
                  title="在册人数"
                  :number="dataPanel.workerRegistered"
                ></vc-icon-card>
              </vw-plate-item>
              <vw-plate-item width="33.33%">
                <vc-icon-card
                  icon-name="icon-worker-field"
                  title="在场人数"
                  :number="dataPanel.workerField"
                ></vc-icon-card>
              </vw-plate-item>
            </vw-plate>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="高点视频" box-type="tower">
          <p @click="smartJz(tz_urls.dbtz_url)" class="bottom_gd">更多</p>
          <button
            type="button"
            slot="extra"
            class="c-button c-button-tiny"
            @click="popHTMLWindow(modalHrefs.fivetwo)"
          >
            <i class="icon icon-fivetwo"></i>
            <span class="text">进入5+2</span>
          </button>
          <vw-box-item>
            <div class="carousel-wrapper">
              <Carousel
                autoplay
                loop
                arrow="never"
                v-model="carouselIndex.group1"
                :radius-dot="true"
                :height="200 * ratio"
              >
                <CarouselItem
                  v-for="(item, index) in videoSrc.group1"
                  :key="'vs1-' + index"
                >
                  <vm-video-player
                    :src="item.url"
                    :width="424 * ratio"
                    :height="200 * ratio"
                    :title="item.title"
                  ></vm-video-player>
                </CarouselItem>
              </Carousel>
              <div class="title">
                {{ videoSrc.group1[carouselIndex.group1].title }}
              </div>
              <button
                class="c-button icon-button"
                @click="
                  popVideoWindow(
                    videoSrc.group1[carouselIndex.group1].url,
                    videoSrc.group1[carouselIndex.group1].title
                  )
                "
              >
                <i class="icon icon-fullscreen"></i>
              </button>
            </div>
          </vw-box-item>
          <vw-box-item>
            <div class="carousel-wrapper">
              <Carousel
                autoplay
                loop
                arrow="never"
                v-model="carouselIndex.group2"
                :radius-dot="true"
                :height="200 * ratio"
              >
                <CarouselItem
                  v-for="(item, index) in videoSrc.group2"
                  :key="'vs2-' + index"
                >
                  <vm-video-player
                    :src="item.url"
                    :width="424 * ratio"
                    :height="200 * ratio"
                    :title="item.title"
                  ></vm-video-player>
                </CarouselItem>
              </Carousel>
              <div class="title">
                {{ videoSrc.group2[carouselIndex.group2].title }}
              </div>
              <button
                class="c-button icon-button"
                @click="
                  popVideoWindow(
                    videoSrc.group2[carouselIndex.group2].url,
                    videoSrc.group2[carouselIndex.group2].title
                  )
                "
              >
                <i class="icon icon-fullscreen"></i>
              </button>
            </div>
          </vw-box-item>
        </vw-box>
      </vw-row>
    </vw-right>
  </div>
</template>

<script>
import bus from "@/lib/bus";
import { _Space, _POI } from "@/lib/vmixs";

import { uniFetcherConstruction } from "@/request/uniFetcher.js";
export default {
  name: "",
  data() {
    return {
      //layout
      ratio: JSON.parse(localStorage.ratio),
      //interactive
      pageStatus: [],
      visible: {
        toggleList: true,
        dataPanel: true,
      },
      carouselIndex: {
        group1: 0,
        group2: 0,
      },
      //data
      warningCount: {
        camera: 0,
        towerCrane: 0,
        alternatives: 0,
        planRoaming: 0,
        personnel: 0,
      },
      dataPanel: {
        projectAmount: 16,
        accomplishPercent: 20,
        patrolCount: 10,
        passCount: 1,
        hiddenDangerous: 9,
        workerAmount: 381,
        workerRegistered: 381,
        workerField: 346,
      },

      tz_urls: {
        max_gd_url:
          "http://construct.zggyd.com/home.html#/enterprise_bigscreen/gydHomePage_tp?tenantId=10800148&orgId=10803794&orgType=GROUP",
        min_gd_url:
          "http://construct.zggyd.com/home.html#/enterprise_bigscreen/gydHomePage_tp?tenantId=10800148&orgId=10803794&orgType=GROUP",
        ck_url:
          "https://xmgl.glodon.com/gss-bi/dashboard/project/436747635446272/primary/5f98fa5686f25400069fbd3c/secondary/5f98fa5686f25400069fbd3e",
        dbtz_url:
          "http://construct.zggyd.com/home.html#/enterprise_bigscreen/gydHomePage_tp?tenantId=10800148&orgId=10803794&orgType=GROUP",
      },
      chartData: {
        projectClassified: [],
      },
      modalHrefs: {
        fivetwo:
          "https://xmgl.glodon.com/cas/login;JSESSIONID=d89c0004-ba72-4cab-a84a-75cdb82528ba?service=https%3A%2F%2Fxmgl.glodon.com%2Fidentification%2Fauthenticate%3Ftype%3Dcas",
        largeEquipment:
          "http://construct.zggyd.com/home.html#/enterprise_bigscreen/gydHomePage_tp?tenantId=10800148&orgId=10803794&orgType=GROUP",
      },
      videoSrc: {
        group1: [
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊1",
          },
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊2",
          },
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊3",
          },
        ],
        group2: [
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "熊有什么好看的1",
          },
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "熊有什么好看的2",
          },
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "熊有什么好看的3",
          },
        ],
      },
    };
  },
  mixins: [_Space, _POI],
  components: {
    "vw-top": () => import("../../layout/Top"),
    "vw-sphere": () => import("../../layout/Sphere"),
    "vc-icon-card": () => import("../../components/IconCard"),
    "vw-plate": () => import("../../layout/Plate"),
    "vw-plate-item": () => import("../../layout/PlateItem"),
    "vm-video-player": () => import("../../components/media/VideoPlayer"),
    "ve-chart-halo-pie": () => import("../../components/echarts/ChartHaloPie"),
  },
  watch: {
    pageStatus: {
      handler(n, o) {
        if (n instanceof Array) {
          let pageStatusName = n[0];
          if (pageStatusName) {
            const statusHashMap = {
              Cameras: this.setState_Cameras,
              TowerCrane: this.setState_TowerCrane,
              Alternatives: this.setState_Alternatives,
              PlanRoaming: this.setState_PlanRoaming,
              Personnel: this.setState_Personnel,
            };
            statusHashMap[n].call();
          } else {
            //执行方法，页面回到初始状态
            this.setState_Initial();
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.declarePageName();
    this.getBuildProjectInfo();
  },

  methods: {
    getBuildProjectInfo() {
      uniFetcherConstruction.getBuildProject().then((res) => {
        if (res) {
          this.dataPanel.projectAmount = parseInt(res.projectAmount);
          this.dataPanel.accomplishPercent = parseInt(res.accomplishPercent);
          this.dataPanel.patrolCount = parseInt(res.patrolCount);
          this.dataPanel.passCount = parseInt(res.passCount);
          this.dataPanel.hiddenDangerous = parseInt(res.hiddenDangerous);
          this.dataPanel.workerAmount = parseInt(res.workerAmount);
          this.dataPanel.workerRegistered = parseInt(res.workerRegistered);
          this.dataPanel.workerField = parseInt(res.workerField);
          this.chartData.projectClassified = res.projectClassified;
          console.log("getBuildProject", res.projectClassified);
          console.log("getBuildProject", this.chartData.projectClassified);
        }
      });
    },
    smartJz(tz_url) {
      bus.$emit("open-modal", {
        type: "web",
        url: tz_url,
      });
    },
    declarePageName() {
      bus.$emit("set-sphere-actived", "Construction");
    },
    setState_Initial() {
      //清空场景内的POI，场景镜头聚焦
      bus.$emit("open-top");
      bus.$emit("open-sphere");
      bus.$emit("open-toolbar");
      this.InitCamera();
      this.ClearSpace();
      // 首屏点位调用
      this.RenderPOI(uniFetcherConstruction.getDefaultPOI);
      this.CameraObj.focusOn("POI");
      //this.clearUECreatures();
      //this.CameraObj.setOn(this.camera.init);
    },
    setState_Cameras() {
      //渲染场景内的摄像头POI
      this.RenderPOI(uniFetcherConstruction.getCameraPOI);
      this.CameraObj.focusOn("POI");
    },
    setState_PlanRoaming() {
        this.RenderPOI(uniFetcherConstruction.getRoamPOI);
      this.CameraObj.focusOn("POI");
    },
    setState_Alternatives() {
      console.log(111);
      this.$anyInterface("API_BuildingSplitActor", "SplitScreen", "", "");
    },
    setState_Personnel() {},
    popHTMLWindow(hrefObj) {
      bus.$emit("open-modal", {
        type: "web",
        url: hrefObj,
      });
    },
    popVideoWindow(url, title) {
      bus.$emit("open-modal", {
        type: "video",
        url,
        title,
      });
    },
    setState_TowerCrane() {
      this.popHTMLWindow(this.modalHrefs.largeEquipment);
    },
    requestFullScreen() {},
    routePageStatus() {
      this.pageStatus = [this.pageStatus.tail()];
    },
  },
};
</script>

<style lang="" scoped>
</style>